import { Component, OnInit, HostBinding, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { NewprojectComponent } from '../newproject/newproject.component';
import { InviteComponent } from '../invite/invite.component';
import { ConfirmDialogComponent } from 'src/app/shared/confirm-dialog/confirm-dialog.component';
import { routeAnimation } from '../../my-animations/router.animation';
import { listAnimation } from '../../my-animations/list.animation';

@Component({
  selector: 'app-projectlist',
  templateUrl: './projectlist.component.html',
  styleUrls: ['./projectlist.component.scss'],
  animations: [
    routeAnimation,
    listAnimation
  ],
  //ChangeDetectionStrategy.OnPush 不用检查当前组件树是否变化  除非 你告诉我  手动设置
  changeDetection:ChangeDetectionStrategy.OnPush
})
export class ProjectlistComponent implements OnInit {

  @HostBinding('@routeAnimation') state: string='';
  projects: Array<any> = [
    {
      'id': 1,
      'name': '企业协作平台',
      'desc': '这是一个企业协作平台',
      'coverIme': 'assets/img/covers/0.jpg'
    },
    {
      'id': 2,
      'name': '企业协作平台',
      'desc': '这是一个企业协作平台',
      'coverIme': 'assets/img/covers/1.jpg'
    },
  ]

  constructor(private matDialog: MatDialog,private cd:ChangeDetectorRef) { }

  ngOnInit() {
  }
  openNewProjectDialog() {
    // 获取引用
    const dialgRef = this.matDialog.open(NewprojectComponent, { data: { title: "新增项目" } })

    dialgRef.afterClosed().subscribe(result => {
      console.log(result)
      this.projects = [...this.projects, {
        'id': 3,
        'name': '这是一个新项目',
        'desc': '这是一个新项目的描述',
        'coverIme': 'assets/img/covers/6.jpg'
      }]
      // 使用 OnPush 检查阻断  手动设置 哪里需要 检查组件
      this.cd.markForCheck();
    })
  }
  launchInviteDialog() {
    const dialgRef = this.matDialog.open(InviteComponent, { data: { title: "邀请成员" } });
  }
  launchEidetDialog() {
    const dialgRef = this.matDialog.open(NewprojectComponent, { data: { title: "编辑项目" } });
  }
  launchDeleteDialog(project) {
    const dialgRef = this.matDialog.open(ConfirmDialogComponent, { data: { title: "删除项目", content: "是否确定删除本项目？" } });
    dialgRef.afterClosed().subscribe(result => {
      console.log(result)
      // 点击确定时才删除
      if(result){
        this.projects = this.projects.filter(p => p.id !== project.id);
        // 在这个点上是 数据 当前组件 数据 发生变化 检查组件
        // 使其 将数据变更 反映到UI 上
        this.cd.markForCheck();

      }

    })
  }

}
